<script setup lang="ts">
import APICommon from '@/api/common/index'
import type { Props, Emits } from './utils/types'
import type { Module } from '@/api/common/types'
import ContentFont from '../ContentFont/index.vue'
import FontList from '../FontList/index.vue'

const $route = useRoute()

const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()

const list = ref<Module[]>([])
watch(() => $props.goods, (data) => {
    list.value = data
}, { immediate: true })

const loading = shallowRef<boolean>(false)

function onSelectChange(filter: any, op: any) {
    // 判断是否有 CategoryList 列表, 如果有,就必须要传递 type 值, 没有就只传递 id
    if ($props.isCategoryList && !$props.type) {
        // 只传递 id
        const data = {
            id: $props.id,
            show_type: $props.showType,
            category_type: $route.name,
            filter: JSON.stringify(filter),
            op: JSON.stringify(op)
        }
        $emit('onSelectChange', data)
    } else {
        // 需要传递 type 和 id
        if ($props.type) {
            const data = {
                type: $props.type,
                id: $props.id,
                show_type: $props.showType,
                category_type: $route.name,
                filter: JSON.stringify(filter),
                op: JSON.stringify(op)
            }
            $emit('onSelectChange', data)
        }
    }
}

</script>

<template>
    <div v-loading="loading">
        <ContentFont v-if="showType == 'album'" :list="list" />
        <FontList v-if="showType == 'shop' || showType == 'default'" :list="list" @on-select-change="onSelectChange" />
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 33px 20px;

    .empty {
        margin: 0 auto;
    }
}
</style>
